<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>关系选择器</title>
	</head>
	<body>
		<style type="text/css">
			li{
				list-style: none;
			}
			/*子代选择器*/
			ul>li{
				float: left;
			}
			dl{
				display: none;
			}
			/*Q:
			1.作用于哪个元素
			作用于 dl元素
			2.控制什么属性
			控制display属性
			3.选择器怎么写
			当鼠标悬停在li标签上时,
			子元素dl的display属性改为block*/
			
		</style>
		<ul>
			<li>
				li1
				<dl>
					<li>Vue</li>
					<li>React</li>
				</dl>
			</li>
			<li>
				li2
				<dl>
					<li>Vue</li>
					<li>React</li>
				</dl>
			</li>
			<li>
				li3
				<dl>
					<li>Vue</li>
					<li>React</li>
				</dl>
			</li>
			<li>
				li4
				<dl>
					<li>Vue</li>
					<li>React</li>
				</dl>
			</li>
			<li>
				li5
				<dl>
					<li>Vue</li>
					<li>React</li>
				</dl>
			</li>
		</ul>
		<style type="text/css">
			input[type="checkbox"]{
				display: none;
			}
	input[type="checkbox"]:checked+span{
		font-size: 20px;
	}
		</style>
		<!--相邻选择器-->
		<label>
			<input type="checkbox" name="" id="" value="" />
			<span>文字变大为20px</span>
		</label>
		<!--兄弟选择器-->
		<!--.base下面兄弟p标签字体颜色改为skyblue-->
		<style type="text/css">
			.base~p{
				color: skyblue;
			}
		</style>
		<p>我是第0个p标签</p>
		<div class="base">base</div>
		<p>我是第1个p标签</p>
		<p>我是第2个p标签</p>
		<p>我是第3个p标签</p>
		<p>我是第4个p标签</p>
		<p>我是第5个p标签</p>
		
		
		
	</body>
</html>
